<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <h2 style="margin-top: 5px">欢迎使用data-cat</h2>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-scrollbar>
            <el-menu default-active="1">
              <router-link to="/">
                <el-menu-item index="1">
                  <template #title>
                    <span>首页</span>
                  </template>
                </el-menu-item>
              </router-link>
              <el-sub-menu index="2">
                <template #title>
                  <span>在线绘图</span>
                </template>
                <el-menu-item-group>
                  <router-link to="/drawhist">
                    <el-menu-item index="2-1">
                      <template #title>
                        <el-text>在线绘制柱状图</el-text>
                      </template>
                    </el-menu-item>
                  </router-link>
                  <router-link to="/drawpie">
                    <el-menu-item index="2-2">
                      <template #title>
                        <el-text>在线绘制饼状图</el-text>
                      </template>
                    </el-menu-item>
                  </router-link>
                  <router-link to="/drawline">
                    <el-menu-item index="2-3">
                      <template #title>
                        <el-text>在线绘制折线图</el-text>
                      </template>
                    </el-menu-item>
                  </router-link>
                </el-menu-item-group>
              </el-sub-menu>
              <el-sub-menu index="3">
                <template #title>
                  <span>沪深300指数</span>
                </template>
                <el-menu-item-group>
                  <router-link to="/csi300">
                    <el-menu-item index="3-1">
                      <template #title>
                        <el-text>沪深300成分股数据</el-text>
                      </template>
                    </el-menu-item>
                  </router-link>
                </el-menu-item-group>
              </el-sub-menu>
              <el-sub-menu index="4">
                <template #title>
                  <span>个股数据</span>
                </template>
                <el-menu-item-group>
                  <router-link to="/stockinfo">
                    <el-menu-item index="4-2">
                      <template #title>
                        <el-text>个股列表信息</el-text>
                      </template>
                    </el-menu-item>
                  </router-link>
                </el-menu-item-group>
                <el-menu-item-group>
                  <router-link to="/getstock">
                    <el-menu-item index="4-1">
                      <template #title>
                        <el-text>大长腿数据</el-text>
                      </template>
                    </el-menu-item>
                  </router-link>
                </el-menu-item-group>
                <el-menu-item-group>
                  <router-link to="/ranklist">
                    <el-menu-item index="4-3">
                      <template #title>
                        <el-text>大长腿排行榜</el-text>
                      </template>
                    </el-menu-item>
                  </router-link>
                </el-menu-item-group>
                <el-menu-item-group>
                  <router-link to="/industryRank">
                    <el-menu-item index="4-4">
                      <template #title>
                        <el-text>行业涨跌幅排行榜</el-text>
                      </template>
                    </el-menu-item>
                  </router-link>
                </el-menu-item-group>
              </el-sub-menu>
            </el-menu>
          </el-scrollbar>
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// 解决ERROR ResizeObserver loop completed with undelivered notifications.

//问题的

const debounce = (fn, delay) => {
  let timer = null;

  return function () {
    let context = this;

    let args = arguments;

    clearTimeout(timer);

    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
};

// 解决ERROR ResizeObserver loop completed with undelivered notifications.

//问题的

const _ResizeObserver = window.ResizeObserver;

window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
  constructor(callback) {
    callback = debounce(callback, 16);

    super(callback);
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.el-header {
  height: 50px !important;
  background: #2f90b9;
}

.el-aside {
  height: calc(100vh - 70px);
  background: #a4aca7;
}

.el-main {
  padding: 0 !important;
  margin: 0 !important;
  height: calc(100vh - 70px);
  background: #f9f4dc;
}

a {
  text-decoration: none;
}
</style>
